<template>
  <div>
      <!-- 第二种方法是computed方法导入...mapState(['count'])的方法导入
      ...代表扩展运算符, 是es6的语法
      意思是: 如果id存在, 不为undefined, 就用后面的对象填充进mapState的对象中 -->
      <!-- <h3>当前最新的count的值: {{count}}</h3> -->
      <h3>{{showNum}}</h3>
      <button @click="handler1">-1</button>
      <button @click="subN(3)">-subN</button>
      <button @click="subAsync">-1 Async</button>
      <button @click="subNAsync(5)">-subN Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  data () {
      return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
      ...mapMutations(['sub', 'subN']),
      ...mapActions(['subAsync', 'subNAsync']),
      handler1() {
        this.sub()
      }
  }
}
</script>

<style lang="less" scoped>
</style>
